<template>
  <el-container>
  <!-- aside -->
  <el-aside width="">
    <h1 class="logo"></h1>
    <!-- :default-active 是手动在地址栏输入路径时菜单高亮 active-text-color点击后文字颜色-->
    <el-menu :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 text-color="black"
                 ref="sideMenu"
                 active-text-color="#999 "
                 :collapse="isCollapse">
    	     <!-- 我们的组件 -->
           <!-- :sideMenu动态注入数据  -->
          <qf-sub-menu :sideMenu='$store.state.sideMenu'></qf-sub-menu>
    </el-menu>
  </el-aside>
  
  <el-container>
      <!-- 导航 -->
    <el-header>
    <el-row type="flex" class="row-bg" justify="space-between">
       <el-col :span="6">
         <div class="grid-content btn" >
          <i @click="isCollapse=!isCollapse" :class="['iconfont',isCollapse?'icon-icon-test':'icon-icon-test1']"></i> 
         </div> 
       </el-col>

        <el-col :span="6"><div class="grid-content title" >CRM管理系统</div></el-col>
       
        <el-col :span="6">
          <div class="grid-content vip">
            <el-avatar  :src="avatarUrl"></el-avatar>

            <b>欢迎您:
              
              <el-dropdown @command="command">
                  <span class="nickname">{{userInfo.nickname}}
                    <i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu >
                    <el-dropdown-item divided command="vipmanager">vip充值</el-dropdown-item>
                     <el-dropdown-item divided command="users">账号信息</el-dropdown-item>
                      <el-dropdown-item divided command="product">项目管理</el-dropdown-item>
                       <el-dropdown-item divided  @click.native="quit">退出</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
              
            </b>
            &nbsp;
            <!-- <b class="quit" @click="quit"> 退出</b> -->
        </div>
       </el-col>
  </el-row>
  </el-header>
  <!-- main -->
    <el-main>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:bread.name}" v-for="bread in breadCrumb" :key="bread.name">{{bread.meta.name}}</el-breadcrumb-item>
      </el-breadcrumb>                                                          
      <router-view></router-view>
    </el-main>
   </el-container>

</el-container>
</template>
<script>
import {mapState} from "vuex"
 export default{
   computed: {
     ...mapState(['userInfo','sideMenu','breadCrumb']),
     avatarUrl(){
       //如果用户没有头像就使用默认头像,如果有就从用户信息中取出
       return this.userInfo.headimgurl?
       this.userInfo.headimgurl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
     }
   },
   data () {
     return {
      isCollapse:false//控制header按钮样式
     }
   },
   methods: {
     quit(){//退出登录
    //  1.清除token
    localStorage.removeItem('bd-token')
    // 2.跳转到登录页
      this.$router.push("/login")
      //3.刷新页面
      location.reload()
     },
    //  右上角用户下拉菜单触发事件
     command(routerName){
      // routerName就是下拉菜单传入的路由名字
      if(routerName){
        this.$router.push({name:routerName})
      }
     }
   }
 }
</script>
<style lang="less" scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
  
    .btn{
      text-align: left;
      margin-top: 10px;
      i{
        font-size: 30px;
        color: white;
      }
    }
    .vip{
      margin-top: 8px;
      b{
        color: white;
        .nickname{
          color: plum;
          cursor: pointer;
        }
      }
      .quit{
      color: black;
      text-decoration: underline;
      cursor: pointer;
    }
    }
    .el-avatar{
      vertical-align: middle;
      margin-right: 10px;
    }
    
  } 
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    
   .subMenu{
     text-align: left;
  
   }
    .logo{
      min-height: 60px;
      background-color: #fff;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  
  }
   .el-container {
      height: 100%;
    
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  
  .vip,.btn {
    background: #d3dce6;
  }
 
  .title {
    background: #e5e9f2;
    color: white;
    font-size: 25px;
    margin-top: 10px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  
</style>